function createOption(name, url, isNew, order)
{
    if (isNew)
    {
        order = options.count();
        options.save(order, { name: name, url: url });
    }
    var inpName, hintName, inpUrl, hintUrl, btnUp, btnDown, btnSave, btnDelete;
    var divCreateOption = document.getElementById('csp_createOption');
    var div = document.createElement('div');
    div.id = order.toString();
        var table = document.createElement('table');
        table.width = '100%';
            var tr1 = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.width = '25%';
                    // name label
                    var lbName = document.createElement('span');
                    lbName.className = 'csp_text';
                    lbName.appendChild(document.createTextNode('Name:'));
                    td1.appendChild(lbName);
                    td1.appendChild(document.createElement('br'));
                    // name textbox
                    inpName = document.createElement('input');
                    inpName.type = 'text';
                    inpName.className = isNew ? 'csp_textbox' : 'csp_readonlyTextbox';
                    inpName.readOnly = !isNew;
                    inpName.size = '25';
                    inpName.value = name;
                    td1.appendChild(inpName);
                    td1.appendChild(document.createElement('br'));
                    // name hint
                    hintName = document.createElement('span');
                    hintName.className = 'csp_hint';
                    hintName.appendChild(document.createTextNode('This text is shown in the menu.'));
                    hintName.style.display = isNew ? 'block' : 'none';
                    td1.appendChild(hintName);
                tr1.appendChild(td1);
                var td2 = document.createElement('td');
                td2.width = '50%';
                    // url label
                    var lbUrl = document.createElement('span');
                    lbUrl.className = 'csp_text';
                    lbUrl.appendChild(document.createTextNode('URL:'));
                    td2.appendChild(lbUrl);
                    td2.appendChild(document.createElement('br'));
                    // url textbox
                    inpUrl = document.createElement('input');
                    inpUrl.type = 'text';
                    inpUrl.className = isNew ? 'csp_textbox' : 'csp_readonlyTextbox';
                    inpUrl.readOnly = !isNew;
                    inpUrl.size = '45';
                    inpUrl.value = url;
                    td2.appendChild(inpUrl);
                    td2.appendChild(document.createElement('br'));
                    // url hint
                    hintUrl = document.createElement('span');
                    hintUrl.className = 'csp_hint';
                    hintUrl.appendChild(document.createTextNode('Insert %s where searching query should be specified.'));
                    hintUrl.style.display = isNew ? 'block' : 'none';
                    td2.appendChild(hintUrl);
                tr1.appendChild(td2);
                var td3 = document.createElement('td');
                td3.width = '10%';
                td3.align = 'right';
                td3.style.verticalAlign = 'middle';
                    // up button
                    btnUp = document.createElement('a');
                    btnUp.className = 'csp_upArrow';
                    btnUp.appendChild(document.createTextNode('\u21E7'));
                    btnUp.addEventListener('click',
                        function(e)
                        {
                            //console.log('up.click');
                            e.stopPropagation();
                            if (parseInt(div.id) > 0)
                            {
                                var curIndex = parseInt(div.id);
                                var prevDiv = document.getElementById((curIndex - 1).toString());
                                document.body.removeChild(div);
                                document.body.insertBefore(div, prevDiv);
                                div.id = (curIndex - 1).toString();
                                prevDiv.id = curIndex.toString();
                                options.changeOrder(curIndex, curIndex - 1);
                            }
                        },
                        false);
                    td3.appendChild(btnUp);
                    td3.appendChild(document.createTextNode('\u0020'));
                    // down button
                    btnDown = document.createElement('a');
                    btnDown.className = 'csp_downArrow';
                    btnDown.appendChild(document.createTextNode('\u21E9'));
                    btnDown.addEventListener('click',
                        function(e)
                        {
                            //console.log('down.click');
                            e.stopPropagation();
                            if (parseInt(div.id) < options.count() - 1)
                            {
                                var curIndex = parseInt(div.id);
                                var nextDiv = document.getElementById((curIndex + 1).toString());
                                var nextNextDiv = document.getElementById((curIndex + 2).toString());
                                if (!nextNextDiv)
                                    nextNextDiv = divCreateOption;
                                document.body.removeChild(div);
                                document.body.insertBefore(div, nextNextDiv);
                                div.id = (curIndex + 1).toString();
                                nextDiv.id = curIndex.toString();
                                options.changeOrder(curIndex, curIndex + 1);
                            }
                        },
                        false);
                    td3.appendChild(btnDown);
                tr1.appendChild(td3);
                var td4 = document.createElement('td');
                td4.width = '15%';
                td4.align = 'right';
                td4.style.verticalAlign = 'middle';
                    // save button
                    btnSave = document.createElement('a');
                    btnSave.className = 'csp_link';
                    var btnCaption = isNew ? 'Save' : 'Modify';
                    btnSave.appendChild(document.createTextNode(btnCaption));
                    btnSave.addEventListener('click',
                        function(e)
                        {
                            //console.log(btnSave.innerHTML + '.click');
                            e.stopPropagation();
                            if (btnSave.innerHTML == 'Modify')
                            {
                                btnSave.innerHTML = 'Save';
                                inpName.readOnly = inpUrl.readOnly = false;
                                inpName.className = inpUrl.className = 'csp_textbox';
                                hintName.style.display = hintUrl.style.display = 'block';
                            }
                            else
                            {
                                if (inpName.value == '' || inpUrl.value == '')
                                {
                                    window.alert('Name and URL should not be empty.');
                                }
                                else
                                {
                                    options.save(parseInt(div.id), { name: inpName.value, url: inpUrl.value });
                                    btnSave.innerHTML = 'Modify';
                                    inpName.readOnly = inpUrl.readOnly = true;
                                    inpName.className = inpUrl.className = 'csp_readonlyTextbox';
                                    hintName.style.display = hintUrl.style.display = 'none';
                                }
                            }
                        },
                        false);
                    td4.appendChild(btnSave);
                    td4.appendChild(document.createTextNode('\u0020-\u0020'));
                    // delete button
                    btnDelete = document.createElement('a');
                    btnDelete.className = 'csp_link';
                    btnDelete.appendChild(document.createTextNode('Delete'));
                    btnDelete.addEventListener('click',
                        function(e)
                        {
                            //console.log('delete.click');
                            e.stopPropagation();
                            var curIndex = parseInt(div.id);
                            for (var i = curIndex + 1; i < options.count(); ++i)
                            {
                                document.getElementById(i.toString()).id = (i - 1).toString();
                            }
                            options.remove(curIndex);
                            document.body.removeChild(div);
                        },
                        false);
                    td4.appendChild(btnDelete);
                tr1.appendChild(td4);
            table.appendChild(tr1);
        div.appendChild(table);
    document.body.insertBefore(div, divCreateOption);
    return div;
}


var options;

function initialize()
{
    options = new Options();
    for (var i = 0; i < options.count(); ++i)
    {
        createOption(options.get(i).name, options.get(i).url, false, i);
    }
}
